<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>创建文字</title>
    <style>
      .three-show {
        width: 500px;
        height: 500px;
        border: 1px solid red;
      }
    </style>
  </head>
  <body>
    <div class="three-show"></div>

    <script src="../js/three.js"></script>
    <script type="module">
      import { createBaseObj } from '../js/myThree.js'
      // import { FontLoader } from './FontLoader.js'

      const oBox = document.getElementsByClassName('three-show')[0]

      const { scene, camera, renderer } = createBaseObj(oBox)

      function initBase() {

        const axesHelper = new THREE.AxesHelper(1000)
        scene.add(axesHelper)

        camera.position.set(150, 150, 150)
        camera.lookAt(0, 0, 0)
      }

      function doSth() {
        createText()
      }

      function createText() {
        const loader = new THREE.FontLoader()
        const font = loader.load(
          './test.json',
          // onLoad 回调
          function (font) {
            console.log('load', font)
            const geometry = new THREE.TextGeometry('Hello three.js!', {
              font: font,
              size: 80,
              height: 5,
              curveSegments: 12,
              bevelEnable: true,
              bevelThickness: 10,
              bevelSize: 8,
              bevelSegments: 5
            })
          },
          // onProcess 回调
          function (xhr) {
            console.log('Process', (xhr.loaded / xhr.total * 100) + '% loaded')
          },
          // onError 回调
          function (err) {
            console.log('an Error happened')
          }
        )
      }

      const animation = () => {
        requestAnimationFrame(animation)
        doSth()
        renderer.render(scene, camera)
      }

      initBase()
      animation()
    </script>
  </body>
</html>
